<template>
  <div>
    <div class="ban">
      <div class="banner">
        <div class="banner_classify">
          <div class="logo">
            <span class="slogan">优质类型小说平台</span>
          </div>
          <div class="classify" @click="item_show">
            <span class="pic">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="20"
                height="14"
                viewBox="0 0 10 7"
                class="fill-current-color"
              >
                <path
                  fill="#000"
                  d="M0 0h10v.7H0zm0 2.1h10v.7H0zm0 2.1h10v.7H0zm0 2.1h10V7H0z"
                ></path>
              </svg>
            </span>
            <span class="banner_text">分类</span>
          </div>
          <div class="search">
            <span class="pic">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="14"
                viewBox="0 0 14 14"
                class="fill-current-color"
              >
                <path
                  fill="#000"
                  d="M14 12.83l-2.19-2.19a6.61 6.61 0 10-1.17 1.17L12.83 14zM2.5 10.7a5.8 5.8 0 018.2-8.2 5.8 5.8 0 01-8.2 8.2z"
                ></path>
              </svg>
            </span>
            <span class="banner_text">搜索</span>
          </div>
        </div>
        <div class="banner_swith" id="scrollBarB">
          <div @mouseenter="origin_down" @mouseleave="ori_up" class="ori_do">
            原创
          </div>
          <div>排行</div>
          <div>出版</div>
          <div>会员</div>
          <div>APP</div>
        </div>
        <div class="scrollBar" id="scrollBar">
          <div class="switch_left">
            <span class="scroll_item">原创首页</span>
            <span class="scroll_item">完本</span>
            <span class="scroll_item">排行</span>
            <span class="scroll_item">悬疑</span>
            <span class="scroll_item">女性</span>
            <span class="scroll_item">幻想</span>
            <span class="scroll_item">文艺</span>
            <span class="scroll_item">历史</span>
            <span class="scroll_item">...</span>
          </div>
          <div class="switch_right">
            <span class="scroll_item">出版</span>
            <span class="scroll_item">会员</span>
            <span class="scroll_item">APP</span>
          </div>
        </div>
        <div class="banner_user">
          <div>成为作者</div>
          <div class="pic_mid">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              viewBox="0 0 24 24"
              class="fill-current-color"
            >
              <path
                d="M19.5 18.2c-.8 0-1.4.6-1.4 1.4 0 .8.6 1.4 1.4 1.4.8 0 1.4-.6 1.4-1.4 0-.8-.6-1.4-1.4-1.4zm-12.7 0c-.8 0-1.4.6-1.4 1.4 0 .8.6 1.4 1.4 1.4s1.4-.6 1.4-1.4c0-.8-.6-1.4-1.4-1.4zM22.2 5.4H5l-.5-2c0-.2-.2-.4-.5-.4H1.5c-.3 0-.5.2-.5.5s.2.5.5.5h2.2l3.4 12.9c.1.2.3.4.5.4h12.8c.3 0 .5-.2.5-.5s-.2-.5-.5-.5H8l-.3-1.2H20c.6 0 1.1-.4 1.2-1L23 6.4c.1-.5-.3-1-.8-1zm-2 8.5c0 .1-.2.2-.2.2H7.4L5.3 6.4H22l-1.8 7.5z"
              ></path>
            </svg>
          </div>
          <div class="pic_mid">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              viewBox="0 0 24 24"
              class="fill-current-color"
            >
              <path
                d="M20.5 17.6h-.6c-.8-.2-1.3-.8-1.3-1.6v-4.8c0-3-2.1-5.6-5-6.2.1-.2.2-.5.2-.7 0-.9-.8-1.7-1.7-1.7-.9 0-1.7.8-1.7 1.7 0 .3.1.5.2.7-2.9.7-5 3.2-5 6.2V16c0 .8-.6 1.5-1.3 1.6h-.8v1.2h5.7c.1 1.5 1.3 2.7 2.8 2.7 1.5 0 2.7-1.2 2.8-2.7h5.7v-1.2zM6.6 16v-4.8c0-3 2.4-5.3 5.4-5.3 3 0 5.4 2.4 5.4 5.3V16c0 .6.2 1.2.5 1.6H6.1c.3-.4.5-1 .5-1.6zm5.4 4.4c-.9 0-1.6-.7-1.7-1.6h3.3c0 .9-.7 1.6-1.6 1.6z"
              ></path>
            </svg>
          </div>
          <div class="pic_mid">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              width="24"
              class="fill-current-color"
            >
              <path
                d="M13.9 5.223l3.14 12.1a.23.23 0 00.284.165l2.332-.645a.233.233 0 00.162-.28l-3.14-12.1a.23.23 0 00-.284-.166l-2.332.645a.233.233 0 00-.162.28zM8.5 5h-3v12h3zm1 12h3V3h-3v14zm4-9.327V14.5h1.77zm0-3.57a1.212 1.212 0 01.293-.125l2.33-.645a1.232 1.232 0 011.516.86v.018l3.136 12.1a1.23 1.23 0 01-.863 1.5l-2.33.647a1.232 1.232 0 01-1.516-.86v-.018l-.537-2.08H13.5V17a1 1 0 01-1 1h-3a1 1 0 01-.5-.134 1 1 0 01-.5.134h-3a1 1 0 01-1-1v-1.5H1.822a.23.23 0 00-.23.227l-.074 5.04a.23.23 0 00.23.233h20.506a.23.23 0 00.228-.234l-.074-5.04a.23.23 0 00-.23-.226h-1.59l-.268-1h1.858a1.23 1.23 0 011.23 1.213l.074 5.038A1.23 1.23 0 0122.27 22H1.75a1.23 1.23 0 01-1.232-1.23v-.02l.074-5.037a1.23 1.23 0 011.23-1.213H4.5V5a1 1 0 011-1h3V3a1 1 0 011-1h3a1 1 0 011 1z"
              ></path>
            </svg>
          </div>
          <div>
            <img src="../../assets/avator1.jpg" alt="" class="avator" />
          </div>
        </div>
      </div>
      <div class="items" v-show="items">
        <div class="ori">
          <h2>原创作品</h2>
          <!-- //循环生成分类 -->
          <div class="book_oris">
            <span
              class="Item_ori"
              v-for="(item, index) in ori_item"
              :key="index"
              :id="item.id"
              @click="toItem($event)"
              >{{ item.item }}</span
            >
          </div>
        </div>
        <div class="pub">
          <h2>出版书籍</h2>
          <div class="book_pubs">
            <div
              class="book_pub"
              v-for="(item, index) in pub_item"
              :key="index"
              v-show="index <= 3 ? true : divHide ? true : false"
            >
              <span class="pub_mItem" :id="item.id" @click="toPubItem($event)">{{ item.name }}</span>
              <span
                class="pub_sItems"
                v-for="(elem, i) in pubOrj[item.id].names"
                :key="i"
                :id="pubOrj[item.id].ids[i]"
                @click="toDetail($event)"
                >{{ elem }}</span
              >
            </div>
          </div>
          <div class="hide_bar" v-show="!divHide" @click="pubHideShow">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 6 11"
              width="7"
              height="14"
              class="hide_arrow"
            >
              <path
                fill="#434649"
                d="M1.1 0L0 .92 4.1 5.5 0 10.08l1.1.92L6 5.52z"
              ></path>
            </svg>
          </div>
        </div>
      </div>
      <div class="ori_downMenu" v-show="ori_down">
        <div class="menus">
          <a class="ori_dItem" v-for="(item, index) in ori_item" :key="index">{{
            item.item
          }}</a>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import func from 'vue-editor-bridge';

export default {
  data() {
    return {
      items: false,
      ori_down: false,
      pubHide: true,
      ori_item: [],
      pub_item: [],
      pub_sItem: [],
      pubOrj: {},
      divHide: false,
    };
  },
  methods: {
    //跳转获取原创
    toItem(e) {
      this.$router.push(`/detail?item=ori&id=${e.target.id}`);
    },
    //跳转获取出版主分类
    toPubItem(e){
      this.$router.push(`/detail?item=pub&id=${e.target.id}`);
    },
    //隐藏显示下拉条
    pubHideShow() {
      this.divHide = true;
    },
    item_show() {
      if (this.ori_down) {
        this.ori_down = !this.ori_down;
        this.items = !this.items;
      } else {
        this.items = !this.items;
      }
    },
    origin_down() {
      if (this.items) {
        this.items = !this.items;
        this.ori_down = !this.ori_down;
      } else {
        this.ori_down = !this.ori_down;
      }
    },
    ori_up() {
      this.ori_down = !this.ori_down;
    },
    //通过首页banner点击进入，设置sessionstore值
    toDetail(e) {
      this.$router.push(`/detail?sID=${e.target.id}`);
      sessionStorage.setItem("first", "1");
    },
  },
  beforeCreate() {
    this.axios.get("/item/allPublishF").then((result) => {
      //第一次遍历 生产数组对象
      result.data.data.forEach((element) => {
        this.pubOrj[element.m_list] = {};
      });
      //第二次遍历
      result.data.data.forEach((element) => {
        this.pubOrj[element.m_list].ids = [];
        this.pubOrj[element.m_list].names = [];
      });
      //第三次遍历 插入数据
      result.data.data.forEach((element) => {
        this.pubOrj[element.m_list].ids.push(element.id);
        this.pubOrj[element.m_list].names.push(element.name);
      });
    });
  },
  mounted() {
    localStorage.setItem("tekentime", `${new Date().getTime()}`);
    this.$nextTick(() => {
      let scrollItem = document.getElementById("scrollBar");
      let scrollItemB = document.getElementById("scrollBarB");

      window.onscroll = function () {
        if (window.scrollY >= 400) {
          scrollItem.style.display = "flex";
          scrollItemB.style.display = "none";
        } else {
          scrollItem.style.display = "none";
          scrollItemB.style.display = "flex";
        }
      };
    });
    this.axios.get("/item/ori").then((result) => {
      // console.log(result.data.data);
      let arr = [];
      arr = result.data.data;
      this.ori_item.push(...arr);
    });
    this.axios.get("/item/publishM").then((result) => {
      this.pub_item.push(...result.data.data);
    });
  },

  computed: {},
};
</script>
<style lang="scss">
$font: "Helvetica Neue", Helvetica, "Lucida Grande", "Luxi Sans", Arial,
  "PingFang SC", "Hiragino Sans GB", STHeiti, "Microsoft YaHei",
  "Wenquanyi Micro Hei", "WenQuanYi Micro Hei Mono", "WenQuanYi Zen Hei",
  "WenQuanYi Zen Hei Mono", LiGothicMed;
$db_color: #389eac;
.ban {
  cursor: pointer;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 20;
  background-color: #fff;
  .ori_downMenu {
    height: 50px;
    width: 100%;
    .menus {
      margin: 0 auto;
      width: 1200px;
      text-align: center;
      line-height: 50px;
      .ori_dItem {
        text-decoration: none;
        color: #000000;
        margin-left: 10px;
      }
    }
  }
  h2 {
    font-size: 18px;
    font-family: $font;
    font-weight: 600;
  }
  h2:hover {
    color: $db_color;
  }
  box-shadow: 1px 0 5px rgba($color: #000000, $alpha: 0.3);
  .items {
    padding-top: 30px;
    width: 1200px;
    margin: 0 auto;
    .ori {
      .book_oris {
        margin-top: 25px;
        .Item_ori {
          display: inline-block;
          padding: 5px 10px;
          box-shadow: 1px 1px 3px rgba($color: #000000, $alpha: 0.15);
          border-radius: 4px;
          margin-right: 5px;
          font-family: $font;
          font-size: 14px;
          font-weight: 200;
        }
        .Item_ori:hover {
          background-color: $db_color;
          color: #fff;
        }
      }
    }
    .pub {
      margin-top: 25px;
      .hide_item {
        position: relative;
        top: -10px;
      }
      .hide_bar {
        margin-top: 10px;
        width: 1920px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        position: relative;
        left: -360px;
        .hide_arrow {
          transform: rotate(90deg);
          fill: #eee;
        }
      }
      .hide_bar:hover {
        background-color: #eee;
      }
      .book_pubs {
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .book_pub {
          width: 50%;
          margin-top: 10px;
          .pub_mItem {
            font-family: $font;
            font-size: 14px;
            font-weight: 600;
          }
          .pub_mItem::after {
            content: ">";
            display: inline-block;
          }
          .pub_sItems {
            font-family: $font;
            font-size: 14px;
            margin-left: 10px;
          }
          .pub_mItem:hover,
          .pub_sItems:hover {
            color: $db_color;
          }
        }
      }
    }
  }
  .banner {
    $height: 50px;
    display: flex;
    justify-content: space-between;
    height: $height;
    //   background-color: #eee;

    box-sizing: border-box;
    .scrollBar {
      display: none;
      line-height: 50px;
      text-align: center;
      justify-content: space-between;
      .scroll_item {
        margin: 0 10px;
        font-family: $font;
        font-size: 14px;
      }
      .switch_left {
        position: relative;
        left: -390px;
      }
      .switch_right {
        position: relative;
        right: -370px;
      }
    }
    .banner_classify {
      display: flex;
      line-height: $height;
      justify-content: space-between;
      div {
        margin-right: 20px;
      }
      .logo {
        width: 117px;
        margin-top: 5px;
        margin-left: 20px;
        background-image: url("../../assets/logo.svg");
        background-repeat: no-repeat;
        background-size: contain;
      }
      .slogan {
        font-size: 12px;
        left: 10px;
        position: relative;
        top: 5px;
        left: 15px;
      }
      .pic {
        margin-top: 6px;
        align-content: center;
      }
      .banner_text {
        font-size: 14px;
        font-family: "Helvetica Neue", Helvetica, "Lucida Grande", "Luxi Sans",
          Arial, "PingFang SC", "Hiragino Sans GB", STHeiti, "Microsoft YaHei",
          "Wenquanyi Micro Hei", "WenQuanYi Micro Hei Mono", "WenQuanYi Zen Hei",
          "WenQuanYi Zen Hei Mono", LiGothicMed;
        margin-left: 6px;
        align-content: center;
      }
    }
    .banner_swith {
      position: relative;
      right: 90px;
      display: flex;
      line-height: $height;
      font-size: 14px;
      font-weight: 200;
      font-family: "Helvetica Neue", Helvetica, "Lucida Grande", "Luxi Sans",
        Arial, "PingFang SC", "Hiragino Sans GB", STHeiti, "Microsoft YaHei",
        "Wenquanyi Micro Hei", "WenQuanYi Micro Hei Mono", "WenQuanYi Zen Hei",
        "WenQuanYi Zen Hei Mono", LiGothicMed;
      text-align: center;
      div {
        margin-left: 30px;
      }
      .ori_do:hover {
        border-bottom: 1px solid #000;
      }
    }
    .banner_user {
      display: flex;
      line-height: $height;
      font-size: 16px;
      font-family: "Helvetica Neue", Helvetica, "Lucida Grande", "Luxi Sans",
        Arial, "PingFang SC", "Hiragino Sans GB", STHeiti, "Microsoft YaHei",
        "Wenquanyi Micro Hei", "WenQuanYi Micro Hei Mono", "WenQuanYi Zen Hei",
        "WenQuanYi Zen Hei Mono", LiGothicMed;
      div {
        margin-right: 15px;
      }
      .avator {
        height: 38px;
        line-height: 38px;
        border-radius: 50% 50%;
        margin-top: 6px;
      }
      .pic_mid {
        position: relative;
        top: 5px;
      }
    }
  }
}
</style>